<template>
    <div>
        <el-row>
            <el-col :md="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item class="mt_5">
                        <el-input v-model="formInline.user" placeholder="ICCID或者设备名称"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="onSubmit">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary" @click="getCarrierData">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                    <el-button type="primary">导出</el-button>
                    <el-button type="primary" @click="dialogVisible = true">物联卡筛选</el-button>
                </el-form>
                <el-dialog title="卡号筛选" :visible.sync="dialogVisible" width="40%">
                    <el-form :model="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="档位：">
                            <el-select v-model="ruleForm.type" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="卡状态：">
                            <el-select v-model="ruleForm.value1" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </el-col>
            <el-col :md="4" class="float-right">
                <el-popover placement="bottom" trigger="hover" title="筛选条件">
                    <el-menu>
                        <el-menu-item index="1">
                            <el-checkbox v-model="checked1">电话号码</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <el-checkbox v-model="checked2">设备名称</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <el-checkbox v-model="checked3">运营商状态</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <el-checkbox v-model="checked4">数据同步时间</el-checkbox>
                        </el-menu-item>
                    </el-menu>
                    <span slot="reference">
                        <el-button type="primary">
                            <i class="iconfont icon-loudou"></i>
                        </el-button>
                    </span>
                </el-popover>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%" >
            <el-table-column type="selection" label="id" width="40" prop="id">
            </el-table-column>
            <el-table-column label="ICCID" prop="iccid" sortable width="190">
            </el-table-column>
            <el-table-column prop="phone" label="电话号码" width="150" v-if="checked1">
            </el-table-column>
            <el-table-column prop="status" label="卡状态" sortable  width="100">
            </el-table-column>
            <el-table-column prop="fencarrier" label="分销商" width="190">
            </el-table-column>
            <el-table-column prop="setting" label="设备名称"  width="100" v-if="checked2">
            </el-table-column>
            <el-table-column prop="carrier_status" label="运营商状态" width="100" v-if="checked3">
            </el-table-column>
            <el-table-column
                label="服务起始日"
                width="200"
                >
                <template slot-scope="scope">
                    {{ scope.row.start_time}}
                </template>
            </el-table-column>
            <el-table-column
                label="服务结束日"
                width="200"
                sortable
                >
                <template slot-scope="scope">
                    {{ scope.row.end_time}}
                </template>
            </el-table-column>
            <el-table-column prop="guige" label="套餐规格" sortable width="110">
            </el-table-column>
            <el-table-column prop="yong" label="本月用量" sortable width="110">
            </el-table-column>
            <el-table-column prop="xian" label="流量限额" sortable width="110">
            </el-table-column>
            <el-table-column
                label="数据同步时间"
                v-if="checked4"
                width="160"
                >
                <template slot-scope="scope">
                    {{ scope.row.tong_time}}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    value1: '',
                    type: ''
                },
                formInline: {
                    user: ''
                },
                option1: [
                    {
                        value: '选项1',
                        label: '库存'
                    },
                    {
                        value: '选项2',
                        label: '可测试'
                    }
                ],
                option2: [
                    {
                        value: '选项1',
                        label: '2.0 GB'
                    },
                    {
                        value: '选项2',
                        label: '5.0 GB'
                    }
                ],
                dialogVisible: false,
                checked1: false,
                checked2: false,
                checked3: false,
                checked4: false,
                tableData: [
                    {
                        iccid: '8986031630200232555',
                        phone: '17798870257',
                        status:'已激活',
                        fencarrier: '上海创城',
                        setting: '11',
                        carrier_status: '在用',
                        start_time: '2018-06-25 11:05:13',
                        end_time: '2018-07-31 23:59:59',
                        guige: '2.0 GB',
                        yong: '0.0 KB',
                        xian: '0.0 KB',
                        tong_time: '2018-07-31 23:59:59'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>